<script setup lang="ts">
import {ref} from "vue";
import sceneComponent from "@/views/right/component/sceneComponent.vue";
import animationComponent from "@/views/right/component/animationComponent.vue"
import dataComponent from "@/views/right/component/dataComponent.vue"
import stateComponent from "@/views/right/component/stateComponent.vue"


defineProps<{
  currentComponent: string;
}>();
// 解析组件名称并返回相应的组件
const resolveComponent = (componentName: string) => {
  console.log(componentName)
  switch (componentName) {
    case 'sceneComponent': return sceneComponent;
    case 'animationComponent': return animationComponent;
    case 'dataComponent': return dataComponent;
    case 'stateComponent': return stateComponent;
      //default: return () => h('div', 'No Content Available');
  }
};
</script>

<template>
  <main class="content" style="width: 18vw">
    <component :is="resolveComponent(currentComponent)" />
  </main>
</template>

<style scoped>
.settings-panel {
  background-color: #1e2430;
  color: white;
  height: 95vh;
  overflow: auto;
}

.el-form-item {
  margin-left: 0.8vw;
}

.el-form-item >>> .el-form-item__label {
  color: white !important;
  justify-content: flex-start;
}

.el-form-item >>> .el-form-item__content {
  width: 4vw;
  height: 2vh;
}

.el-form-item >>> input {
  color: white !important;
}

.right-menu-title /deep/ .el-form-item__label {
  font-size: 1vw;
  font-weight: 550;
  --color: #fff;
}

:deep .el-form-item__label {
  font-size: 0.8vw;
  /* font-weight: 600; */
  height: 3vh;
}

:deep .el-input {
  width: 8vw;
}

:deep .el-input__inner {
  width: 2vw;
  height: 3vh;
  font-size: 0.6vw;
}

:deep .el-color-picker__color-inner {
  width: 1.5vw;
  height: 1.5vw;
}

:deep .el-color-picker__trigger {
  width: 1.7vw;
  height: 1.7vw;
  padding: 0;
}

:deep .el-input__wrapper {
  background-color: #1e2430;
}

:deep .el-input__wrapper .el-input__inner {
  width: 4vw;
  height: 3vh;
}

:deep .el-input-number .el-input__wrapper {
  padding-left: 0;
  padding-right: 0;
}

:deep .el-date-editor {
  --el-date-editor-width: 8vw;
}

:deep .el-checkbox__input {
  width: 2vw;
  height: 2vw;
  //margin-left: 0.5vw;
  margin-top: 1vw;
}
:deep .el-checkbox__inner:after {
  height: 1vh;
  left: 0.8vh;
}
:deep .el-checkbox__inner {
  width: 1vw;
  height: 1vw;
}

:deep .el-icon svg {
  width: 2vw;
  height: 2.5vh;
}

:deep .el-slider {
  width: 10vw;
}

:deep .el-slider__input {
  width: 4vw;
}

:deep .el-select__placeholder {
  font-size: 1.5vh;
}

:deep .el-icon {
  --color: white;
}

:deep .el-input-number__decrease {
  width: 1vw;
  background-color: #42516c;
}

:deep .el-input-number__increase {
  width: 1vw;
  background-color: #42516c;
}

:deep .el-input-number.is-controls-right .el-input-number__decrease {
  width: 1vw;
  background-color: #42516c;
  height: 1.5vh;
}

:deep .el-input-number.is-controls-right .el-input-number__increase {
  width: 1vw;
  height: 1.5vh;
  background-color: #42516c;
}

:deep .el-select__wrapper {
  background-color: #1e2430;
  width: 5vw;
  height: 3vh;
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 0.3vw; /* 宽度 */
  background-color: rgb(123, 255, 0); /* 背景色 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #1e2430; /* 轨道颜色 */
  border-radius: 0; /* 轨道圆角 */
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #2926c3; /* 滑块颜色 */
  border-radius: 2px; /* 滑块圆角 */
  border: 0.8vw solid #535f79; /* 滑块边框 */
}

/* 滑块在悬停或者点击时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* 悬停时滑块颜色 */
}
</style>
